<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shoppingCar{
				width:200px;
				height:40px;

				line-height: 40px;
				text-align: center;
				margin:20px auto;
				
				position:relative;
			}
			.shoppingCar .title{
				background: blue;
				width:198px;
				position:absolute;
				top:0px;
				left:0px;
				z-index: 10;
			}
			.shoppingCar .hide{
				width:400px;
				height:30px;
				border:1px solid red;
				position:absolute;
				top:40px;
				right:0px;
				z-index: 1;
				display: none;
			}
			
			.shoppingCar:hover .title{
				background: white;
				border:1px solid red;
				border-bottom: none;
			}
			.shoppingCar:hover .hide{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="shoppingCar">
			<div class="title">购物车</div>
			<div class="hide"></div>
		</div>
	</body>
</html>
